<template>
    <div>

        <div @click="tolink(goods.id)" class="item">
            <img class="imgurl" :src="goods.img_url" alt="" />


            <!--  内置的组件 -->

            <slot name="cid">
                <!-- 666 -->
            </slot>
            <slot>
                <!-- 777 -->
            </slot>


            <div class="bottom">
                <div class="line1">
                    <p>{{ goods.title }} </p>
                </div>

                <p class="pflex flex aicenter">
                    <span>
                        <span> ￥{{ goods.sell_price }} </span>

                        <span class="maskfont"> {{ goods.market_price }}</span>
                    </span>

                    <span class="sell">已售: {{ goods.buy }}</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['goods'],
    methods: {
        tolink(data) {
            this.$router.push("/goodsdetail?id=" + data + "&uuid=666")
        }
    }

}
</script>

<style lang="scss" scoped>
.imgurl {
    width: 7rem;
    height: 7rem;
}

.item {

    font-size: 0.3rem;
    background-color: #ffffff;

    border-radius: 20px;
    overflow: hidden;

    .bottom {
        padding: 20px;
        /*1.先强制一行内显示文本*/
        // white-space: nowrap;
        // /*2.超出的部分隐藏*/
        // overflow: hidden;
        // /*3.文字用省略号替代超出的部分*/
        // text-overflow: ellipsis;
    }
}

.line1 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    /*弹性伸缩盒子模型显示*/
    display: -webkit-box;

    /*限制在一个块元素显示的文本的行数*/
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}

.item .pflex span span:nth-child(1) {
    color: red;
    font-size: 0.7rem;
}

.item .pflex span span:nth-child(2) {
    color: #6d6d6dcc;
    font-size: 0.5rem;
    text-decoration: line-through;
}
</style>